<template>
  <!-- 更新入会资料 - 申请信息 -->
  <view class="application-info">
    <view class="info-details">
      <!-- <DetailsItem class="info-details-item" label="会员编号" :content="info?.memberNumber" /> -->
      <!-- <DetailsItem class="info-details-item" label="申请职务" :content="info?.levelName" /> -->
      <DetailsItem class="info-details-item" label="会员类型" :content="getApplyType" />
      <DetailsItem class="info-details-item" label="服务专员" :content="info?.attacheName" />
      <DetailsItem
        class="info-details-item"
        label="入会时间"
        :content="formatToDate(info?.joinTime)"
      />
      <DetailsItem
        class="info-details-item"
        label="已缴费至"
        :content="formatToDate(info?.memberEndTime)"
      />
      <!-- <DetailsItem class="info-details-item" label="会员职务" :content="info?.memberPostName" /> -->
    </view>
  </view>
</template>

<script setup lang="ts">
  import { type MemberInfoGetApplyResult } from '@/api/membership/types';
  import { computed, type PropType } from 'vue';
  import DetailsItem from './detailsItem.vue';
  import dictionary from '@/utils/dictionary';
  import { formatToDate } from '@/utils/dateUtil';

  const props = defineProps({
    info: Object as PropType<MemberInfoGetApplyResult>,
  });

  const getApplyType = computed(() => {
    const typeList = dictionary.getLocal('memberType');
    const content = typeList.find((v) => v.dictValue === props.info?.applyType)?.dictLabel;
    return content;
  });
</script>

<style lang="scss" scoped>
  .application-info {
    background-color: #fff;
    padding: 0 30rpx;
    padding-top: 30rpx;
  }
  .info-details {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    &-item {
      width: 50%;
    }
  }
</style>
